
<template>
  <div class="content-section" :class="{ active: isActive }">
    <div class="monitor-navigator">
      <!-- 页面标题 -->
      <div class="page-header">
        <div class="header-content">
          <div class="header-title">
            <div class="title-icon">🎯</div>
            <div class="title-text">
              <h1>监控服务导航</h1>
              <p>快速访问集群中的监控服务</p>
            </div>
          </div>
          <div class="header-actions">
            <div class="connection-status" :class="{ connected: isConnected }">
              <div class="status-dot" :class="{ online: isConnected }"></div>
              <span>{{ connectionStatusText }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 集群信息摘要 -->
      <div class="cluster-info-section">
        <div class="glass-card">
          <div class="card-header">
            <div class="header-left">
              <div class="card-icon">ℹ️</div>
              <div class="card-title">
                <h3>集群信息</h3>
                <span class="card-subtitle">当前连接的集群详细信息</span>
              </div>
            </div>
            <div class="header-right">
              <button class="modern-btn primary" @click="refreshClusterInfo" :disabled="isLoading">
                <span class="btn-icon">{{ isLoading ? '⏳' : '🔄' }}</span>
                刷新信息
              </button>
            </div>
          </div>
          
          <div class="card-content">
            <div class="info-grid">
              <div class="info-item">
                <span class="info-label">连接状态:</span>
                <span class="info-value" :class="{ 'text-success': isConnected, 'text-error': !isConnected }">
                  {{ isConnected ? '已连接' : '连接失败' }}
                </span>
              </div>
              <div class="info-item">
                <span class="info-label">Kubernetes版本:</span>
                <span class="info-value">{{ clusterInfo.version || '获取中...' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">节点数量:</span>
                <span class="info-value">{{ clusterInfo.nodeCount || '获取中...' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">命名空间数量:</span>
                <span class="info-value">{{ clusterInfo.namespaceCount || '获取中...' }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 监控服务网格 -->
      <div class="services-section">
        <div class="section-header">
          <h2>可用的监控服务</h2>
          <button class="modern-btn primary" @click="discoverServices" :disabled="isDiscovering">
            <span class="btn-icon">{{ isDiscovering ? '⏳' : '🔍' }}</span>
            {{ isDiscovering ? '扫描中...' : '扫描服务' }}
          </button>
        </div>

        <div class="services-grid">
          <!-- Grafana服务卡片 -->
          <div 
            class="service-card" 
            :class="{ 
              available: services.grafana.available, 
              unavailable: !services.grafana.available && services.grafana.checked 
            }"
          >
            <div class="service-header">
              <div class="service-icon">📊</div>
              <div class="service-info">
                <h3>Grafana</h3>
                <p>可视化监控仪表板</p>
              </div>
              <div class="service-status">
                <div 
                  class="status-dot" 
                  :class="{ 
                    online: services.grafana.available, 
                    offline: !services.grafana.available && services.grafana.checked,
                    scanning: !services.grafana.checked && isDiscovering
                  }"
                ></div>
              </div>
            </div>
            
            <div class="service-details" v-if="services.grafana.available">
              <div class="detail-row">
                <span class="detail-label">命名空间:</span>
                <span class="detail-value">{{ services.grafana.namespace }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">服务名称:</span>
                <span class="detail-value">{{ services.grafana.serviceName }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">端口:</span>
                <span class="detail-value">{{ services.grafana.port }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">访问地址:</span>
                <span class="detail-value">{{ services.grafana.url }}</span>
              </div>
            </div>

            <div class="service-actions">
              <button 
                v-if="services.grafana.available"
                class="service-btn primary"
                @click="openService('grafana')"
              >
                <span class="btn-icon">🚀</span>
                访问Grafana
              </button>
              <span v-else-if="services.grafana.checked" class="unavailable-text">
                服务未发现
              </span>
              <span v-else class="scanning-text">
                扫描中...
              </span>
            </div>
          </div>

          <!-- Prometheus服务卡片 -->
          <div 
            class="service-card" 
            :class="{ 
              available: services.prometheus.available, 
              unavailable: !services.prometheus.available && services.prometheus.checked 
            }"
          >
            <div class="service-header">
              <div class="service-icon">🔥</div>
              <div class="service-info">
                <h3>Prometheus</h3>
                <p>指标收集与查询</p>
              </div>
              <div class="service-status">
                <div 
                  class="status-dot" 
                  :class="{ 
                    online: services.prometheus.available, 
                    offline: !services.prometheus.available && services.prometheus.checked,
                    scanning: !services.prometheus.checked && isDiscovering
                  }"
                ></div>
              </div>
            </div>
            
            <div class="service-details" v-if="services.prometheus.available">
              <div class="detail-row">
                <span class="detail-label">命名空间:</span>
                <span class="detail-value">{{ services.prometheus.namespace }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">服务名称:</span>
                <span class="detail-value">{{ services.prometheus.serviceName }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">端口:</span>
                <span class="detail-value">{{ services.prometheus.port }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">访问地址:</span>
                <span class="detail-value">{{ services.prometheus.url }}</span>
              </div>
            </div>

            <div class="service-actions">
              <button 
                v-if="services.prometheus.available"
                class="service-btn primary"
                @click="openService('prometheus')"
              >
                <span class="btn-icon">🚀</span>
                访问Prometheus
              </button>
              <span v-else-if="services.prometheus.checked" class="unavailable-text">
                服务未发现
              </span>
              <span v-else class="scanning-text">
                扫描中...
              </span>
            </div>
          </div>

          <!-- Jaeger服务卡片 -->
          <div 
            class="service-card" 
            :class="{ 
              available: services.jaeger.available, 
              unavailable: !services.jaeger.available && services.jaeger.checked 
            }"
          >
            <div class="service-header">
              <div class="service-icon">🔍</div>
              <div class="service-info">
                <h3>Jaeger</h3>
                <p>分布式链路追踪</p>
              </div>
              <div class="service-status">
                <div 
                  class="status-dot" 
                  :class="{ 
                    online: services.jaeger.available, 
                    offline: !services.jaeger.available && services.jaeger.checked,
                    scanning: !services.jaeger.checked && isDiscovering
                  }"
                ></div>
              </div>
            </div>
            
            <div class="service-details" v-if="services.jaeger.available">
              <div class="detail-row">
                <span class="detail-label">命名空间:</span>
                <span class="detail-value">{{ services.jaeger.namespace }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">服务名称:</span>
                <span class="detail-value">{{ services.jaeger.serviceName }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">端口:</span>
                <span class="detail-value">{{ services.jaeger.port }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">访问地址:</span>
                <span class="detail-value">{{ services.jaeger.url }}</span>
              </div>
            </div>

            <div class="service-actions">
              <button 
                v-if="services.jaeger.available"
                class="service-btn primary"
                @click="openService('jaeger')"
              >
                <span class="btn-icon">🚀</span>
                访问Jaeger
              </button>
              <span v-else-if="services.jaeger.checked" class="unavailable-text">
                服务未发现
              </span>
              <span v-else class="scanning-text">
                扫描中...
              </span>
            </div>
          </div>

          <!-- Kiali服务卡片 -->
          <div 
            class="service-card" 
            :class="{ 
              available: services.kiali.available, 
              unavailable: !services.kiali.available && services.kiali.checked 
            }"
          >
            <div class="service-header">
              <div class="service-icon">🕸️</div>
              <div class="service-info">
                <h3>Kiali</h3>
                <p>服务网格可视化</p>
              </div>
              <div class="service-status">
                <div 
                  class="status-dot" 
                  :class="{ 
                    online: services.kiali.available, 
                    offline: !services.kiali.available && services.kiali.checked,
                    scanning: !services.kiali.checked && isDiscovering
                  }"
                ></div>
              </div>
            </div>
            
            <div class="service-details" v-if="services.kiali.available">
              <div class="detail-row">
                <span class="detail-label">命名空间:</span>
                <span class="detail-value">{{ services.kiali.namespace }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">服务名称:</span>
                <span class="detail-value">{{ services.kiali.serviceName }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">端口:</span>
                <span class="detail-value">{{ services.kiali.port }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">访问地址:</span>
                <span class="detail-value">{{ services.kiali.url }}</span>
              </div>
            </div>

            <div class="service-actions">
              <button 
                v-if="services.kiali.available"
                class="service-btn primary"
                @click="openService('kiali')"
              >
                <span class="btn-icon">🚀</span>
                访问Kiali
              </button>
              <span v-else-if="services.kiali.checked" class="unavailable-text">
                服务未发现
              </span>
              <span v-else class="scanning-text">
                扫描中...
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

export default {
  name: 'MonitorNavigator',
  props: {
    isActive: {
      type: Boolean,
      default: false
    }
  },
  setup() {
    // 状态管理
    const isConnected = ref(false)
    const isLoading = ref(false)
    const isDiscovering = ref(false)

    // 集群信息
    const clusterInfo = ref({
      version: '',
      nodeCount: 0,
      namespaceCount: 0
    })

    // 监控服务状态
    const services = ref({
      grafana: {
        available: false,
        checked: false,
        namespace: '',
        serviceName: '',
        port: '',
        url: ''
      },
      prometheus: {
        available: false,
        checked: false,
        namespace: '',
        serviceName: '',
        port: '',
        url: ''
      },
      jaeger: {
        available: false,
        checked: false,
        namespace: '',
        serviceName: '',
        port: '',
        url: ''
      },
      kiali: {
        available: false,
        checked: false,
        namespace: '',
        serviceName: '',
        port: '',
        url: ''
      }
    })

    // 连接状态文本
    const connectionStatusText = computed(() => {
      if (isLoading.value) return '检查中...'
      return isConnected.value ? '已连接' : '连接失败'
    })

    // 检查集群连接状态
    const checkClusterStatus = async () => {
      isLoading.value = true
      try {
        const response = await axios.get('http://127.0.0.1:3210/api/navigate/cluster/status')
        
        // 处理ApiResponse包装的数据结构
        if (response.data.success && response.data.data) {
          isConnected.value = response.data.data.connected || false
        } else {
          isConnected.value = false
        }
        
        if (isConnected.value) {
          await fetchClusterInfo()
          await discoverServices()
        }
      } catch (error) {
        console.error('检查集群状态失败:', error)
        isConnected.value = false
        ElMessage.error('无法连接到集群，请检查kubeconfig配置')
      } finally {
        isLoading.value = false
      }
    }

    // 刷新集群信息
    const refreshClusterInfo = async () => {
      await checkClusterStatus()
    }

    // 获取集群信息
    const fetchClusterInfo = async () => {
      try {
        const response = await axios.get('http://127.0.0.1:3210/api/navigate/cluster/info')
        
        // 处理ApiResponse包装的数据结构
        if (response.data.success && response.data.data) {
          clusterInfo.value = response.data.data
        } else {
          throw new Error(response.data.message || '获取集群信息失败')
        }
      } catch (error) {
        console.error('获取集群信息失败:', error)
        ElMessage.warning('获取集群信息失败: ' + (error.response?.data?.message || error.message))
      }
    }

    // 发现监控服务
    const discoverServices = async () => {
      if (!isConnected.value) {
        ElMessage.warning('请先确保集群连接正常')
        return
      }

      isDiscovering.value = true
      resetServices()
      
      try {
        const response = await axios.get('http://127.0.0.1:3210/api/navigate/services/discover')
        
        // 处理ApiResponse包装的数据结构
        let discoveredServices = {}
        if (response.data.success && response.data.data) {
          discoveredServices = response.data.data
        } else {
          throw new Error(response.data.message || '服务发现失败')
        }

        // 更新服务状态
        Object.keys(services.value).forEach(serviceName => {
          const service = discoveredServices[serviceName]
          if (service && service.available) {
            services.value[serviceName] = {
              available: true,
              checked: true,
              namespace: service.namespace || 'default',
              serviceName: service.name || serviceName,
              port: service.port || 'N/A',
              url: service.url || '#'
            }
          } else {
            services.value[serviceName].checked = true
          }
        })

        const availableCount = Object.values(services.value).filter(s => s.available).length
        const totalCount = Object.keys(services.value).length
        
        if (availableCount > 0) {
          ElMessage.success(`服务发现完成，找到 ${availableCount}/${totalCount} 个可用服务`)
        } else {
          ElMessage.info('未发现任何监控服务，请检查集群中是否已部署相关服务')
        }
      } catch (error) {
        const errorMessage = error.response?.data?.message || error.message || '服务发现失败'
        ElMessage.error(errorMessage)
        
        // 标记所有服务为已检查但不可用
        Object.keys(services.value).forEach(serviceName => {
          services.value[serviceName].checked = true
        })
      } finally {
        isDiscovering.value = false
      }
    }

    // 重置服务状态
    const resetServices = () => {
      Object.keys(services.value).forEach(serviceName => {
        services.value[serviceName] = {
          available: false,
          checked: false,
          namespace: '',
          serviceName: '',
          port: '',
          url: ''
        }
      })
    }

    // 打开监控服务
    const openService = (serviceName) => {
      const service = services.value[serviceName]
      if (!service || !service.available) {
        ElMessage.error('服务不可用')
        return
      }

      if (!service.url || service.url === '#') {
        ElMessage.error('服务地址无效')
        return
      }

      try {
        window.open(service.url, '_blank', 'noopener,noreferrer')
        ElMessage.success(`正在打开 ${serviceName} 服务...`)
      } catch (error) {
        ElMessage.error('打开服务失败: ' + error.message)
      }
    }

    // 健康检查
    const healthCheck = async () => {
      try {
        const response = await axios.get('http://127.0.0.1:3210/api/navigate/health')
        if (response.data.success && response.data.data) {
          const healthData = response.data.data
          console.log('健康检查结果:', healthData)
          return healthData
        }
      } catch (error) {
        console.error('健康检查失败:', error)
      }
    }

    // 组件挂载时检查连接状态
    onMounted(() => {
      checkClusterStatus()
      // 可选：定期健康检查
      // setInterval(healthCheck, 30000) // 每30秒检查一次
    })

    return {
      isConnected,
      isLoading,
      isDiscovering,
      clusterInfo,
      services,
      connectionStatusText,
      refreshClusterInfo,
      discoverServices,
      openService,
      healthCheck
    }
  }
}
</script>

<style scoped>
/* 基础布局 */
.content-section {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 2rem;
  transition: all 0.3s ease;
}

.monitor-navigator {
  max-width: 1400px;
  margin: 0 auto;
}

/* 页面标题 */
.page-header {
  margin-bottom: 2rem;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.title-icon {
  font-size: 2.5rem;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.title-text h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: white;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.title-text p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0.25rem 0 0 0;
}

.connection-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  font-weight: 500;
  transition: all 0.3s ease;
}

.connection-status.connected {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.3);
}

/* 玻璃拟态卡片 */
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}

.glass-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.card-icon {
  font-size: 1.5rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.card-title h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: white;
  margin: 0;
}

.card-subtitle {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}

.card-content {
  padding: 2rem;
}

/* 表单样式 */
.connection-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: white;
  margin-bottom: 0.25rem;
}

.modern-input,
.modern-select,
.modern-textarea {
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  color: white;
  font-size: 0.875rem;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.modern-input::placeholder,
.modern-textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.modern-input:focus,
.modern-select:focus,
.modern-textarea:focus {
  outline: none;
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  background: rgba(255, 255, 255, 0.15);
}

.modern-textarea {
  min-height: 100px;
  resize: vertical;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.8rem;
}

.modern-input:disabled,
.modern-select:disabled,
.modern-textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 按钮样式 */
.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.modern-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  backdrop-filter: blur(10px);
}

.modern-btn.primary {
  background: rgba(99, 102, 241, 0.8);
  color: white;
  border: 1px solid rgba(99, 102, 241, 0.3);
}

.modern-btn.primary:hover:not(:disabled) {
  background: rgba(99, 102, 241, 1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.modern-btn.secondary {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.modern-btn.secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.modern-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.modern-btn.loading {
  pointer-events: none;
}

/* 状态指示器 */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6b7280;
  transition: all 0.3s ease;
}

.status-dot.online {
  background: #10b981;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.status-dot.offline {
  background: #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.status-dot.scanning {
  background: #f59e0b;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* 服务网格 */
.services-section {
  margin: 2rem 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.section-header h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: white;
  margin: 0;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1.5rem;
}

/* 服务卡片 */
.service-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  transition: all 0.3s ease;
  height: fit-content;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.service-card.available {
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.05);
}

.service-card.unavailable {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.05);
}

.service-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.service-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  margin-left: 1rem;
}

.service-info h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: white;
  margin: 0;
}

.service-info p {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.service-icon {
  font-size: 1.5rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.service-details {
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
}

.detail-label {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.detail-value {
  color: white;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.8rem;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-actions {
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: center;
}

.service-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: rgba(99, 102, 241, 0.8);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  justify-content: center;
}

.service-btn:hover {
  background: rgba(99, 102, 241, 1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.unavailable-text,
.scanning-text {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  text-align: center;
  padding: 0.75rem;
}

.scanning-text {
  color: rgba(245, 158, 11, 0.8);
}

/* 集群信息 */
.cluster-info-section {
  margin-top: 2rem;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.info-label {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  font-size: 0.875rem;
}

.info-value {
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
  text-align: right;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .content-section {
    padding: 1rem;
  }
  
  .header-content {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .title-text h1 {
    font-size: 2rem;
  }
  
  .services-grid {
    grid-template-columns: 1fr;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .card-content {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .title-text h1 {
    font-size: 1.5rem;
  }
  
  .card-content {
    padding: 1rem;
  }
  
  .service-header {
    padding: 1rem;
  }
}

/* 加载动画 */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.loading .btn-icon {
  animation: spin 1s linear infinite;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}
</style>
